<template>
  <el-pagination
    :current-page="current"
    :page-size="pageSize"
    :page-sizes="pageSizeList"
    :layout="pageLayout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import * as pagination from './pagination'

const { pageLayout, pageSizeList, handleSizeChangeFn, handleCurrentChangeFn } = pagination

export default defineComponent({
  name: 'ifPagination',
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    fn: {
      type: Function,
      default: () => () => {}
    },
  },
  setup(props) {
    // 变量
    const currentProps = toRefs(props)
    const current = currentProps.currentPage
    // 方法
    const handleSizeChange = (val:number) => {
      handleSizeChangeFn(val, props.fn)
    }
    const handleCurrentChange = (val:number) => {
      handleCurrentChangeFn(val, props.fn)
    }
    return {
      // 变量
      current,
      pageSizeList,
      pageLayout,
      // 方法
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>

<style scoped lang="less">
</style>
